<!-- 商品分类详情 -->
<template>
  <div class="class-detail">
    <van-nav-bar fixed title="分类1" safe-area-inset-top>
      <template #left>
        <img
          style="width: 30px; margin-right: 10px"
          src="../../assets/images/返回2.png"
          @click="() => $router.go(-1)"
          alt=""
        />
        <img
          style="width: 30px"
          @click="() => $router.push({ path: '/' })"
          src="../../assets/images/返回首页.png"
          alt=""
        />
      </template>
    </van-nav-bar>
    <!-- 正文 -->
    <van-search shape="round" v-model="search" placeholder="请输入搜索关键词" />
    <van-tabs
      v-model="active"
      animated
      title-active-color="#3e96e8"
      color="#3e96e8"
    >
      <van-tab
        :name="item.id"
        :title="item.label"
        v-for="item in tabList"
        :key="item.id"
      >
        <van-grid :column-num="5" :border="false" icon-size="1.4rem">
          <van-grid-item
            :icon="require('../../assets/images/mall/店铺图片2.png')"
            text="文字"
          />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
          <van-grid-item icon="photo-o" text="文字" />
        </van-grid>
      </van-tab>
    </van-tabs>
    <div class="tabs">
      <van-tabs
        v-model="active2"
        animated
        title-active-color="#3e96e8"
        color="#3e96e8"
      >
        <van-tab
          :name="item.id"
          :title="item.label"
          v-for="item in tabList"
          :key="item.id"
        >
        </van-tab>
      </van-tabs>
      <span>查看更多</span>
    </div>
    <div class="list">
      <van-grid :gutter="10" column-num="2" icon-size="140px">
        <van-grid-item
          v-for="value in 8"
          :key="value"
          icon="../assets/images/添加.png"
        >
          <template #text>
            <div class="text">
              <p>好饲料中国造好饲料中国造好饲料中国造好饲料中国造</p>
              <span>￥</span> <span>9.99</span>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      search: "",
      active: 1,
      active2: 1,
      tabList: [
        {
          id: 1,
          label: "饲料",
        },
        {
          id: 2,
          label: "药品",
        },
        {
          id: 3,
          label: "器材",
        },
        {
          id: 4,
          label: "虾苗",
        },
        {
          id: 5,
          label: "场域",
        },
      ],
    };
  },
  methods: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
:deep(.van-grid-item__content--surround) {
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid #ccc;
}
.class-detail {
  width: 100%;
  padding-top: 92px;
  .tabs {
    border-top: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background-color: #fff;
    > span {
      font-size: 26px;
      color: #ccc;
    }
    > :first-child {
      flex: 1;
    }
  }
  .list {
    padding: 20px 0;
    background-color: #fff;
    .text {
      font-size: 30px;

      p {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*将对象作为弹性伸缩盒子模型显示*/
        -webkit-line-clamp: 2;
        /*限制文本的行数，只显示3行*/
        -webkit-box-orient: vertical;
        /*设置或检索伸缩盒对象的子元素的排列方式 */
      }

      span {
        color: rgb(94, 154, 246);
        font-weight: 600;
        font-size: 30px;
      }

      :last-child {
        font-weight: 600;
        font-size: 40px;
      }
    }
  }
}
</style>